<template>
  <div class="chart-box history">
    <div class="chart-title">
      <svg
        t="1626832273186"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1559"
        width="200"
        height="200"
      >
        <path
          d="M883.712 749.568c0-13.312-9.216-22.528-22.528-22.528h-67.072v-98.816c0-13.312-9.216-22.528-22.528-22.528-13.312 0-22.528 9.216-22.528 22.528v143.36h116.736c8.704 0.512 17.92-8.704 17.92-22.016zM188.928 937.472h349.696c13.312 0 23.552-15.872 23.552-29.184s-9.728-29.696-23.552-29.696H203.776c-31.232 0-58.368-12.8-58.368-44.032V189.44c0-31.232 26.112-44.032 57.344-44.032h486.912c31.232 0 44.544 13.312 44.544 44.544v242.176c0 13.312 16.384 21.504 29.696 21.504 13.312 0 29.696-8.192 29.696-21.504V189.44c0-58.368-45.056-102.912-102.912-102.912h-501.76c-58.368 0-102.912 45.056-102.912 102.912v645.12c0 58.368 44.544 102.912 102.912 102.912z"
          p-id="1560"
          fill="#409EFF"
        ></path>
        <path
          d="M771.584 937.472c116.736 0 210.432-94.208 210.432-210.432s-94.208-210.432-210.432-210.432-210.432 94.208-210.432 210.432 93.696 210.432 210.432 210.432z m0-376.32c89.6 0 165.888 71.68 165.888 165.888 0 89.6-71.68 165.888-165.888 165.888-89.6 0-165.888-71.68-165.888-165.888 0-89.6 76.288-165.888 165.888-165.888zM229.376 301.568H650.24c13.312 0 22.528-9.216 22.528-22.528 0-13.312-9.216-22.528-22.528-22.528H229.376c-13.312 0-22.528 9.216-22.528 22.528s8.704 22.528 22.528 22.528z m165.888 420.864H229.376c-13.312 0-22.528 9.216-22.528 22.528s9.216 22.528 22.528 22.528h165.888c13.312 0 22.528-9.216 22.528-22.528s-9.216-22.528-22.528-22.528zM471.04 565.76H229.376c-13.312 0-22.528 9.216-22.528 22.528 0 13.312 9.216 22.528 22.528 22.528H471.04c13.312 0 22.528-9.216 22.528-22.528 0-13.312-8.704-22.528-22.528-22.528z m179.2-152.576H229.376c-13.312 0-22.528 9.216-22.528 22.528 0 13.312 9.216 22.528 22.528 22.528H650.24c13.312 0 22.528-9.216 22.528-22.528 0-13.312-8.704-22.528-22.528-22.528z"
          p-id="1561"
          fill="#409EFF"
        ></path>
      </svg>
      历史数据概况
    </div>
    <div class="chart-content">
      <div class="survey">
        <div class="survey-box">
          <span>总发放卡券</span>
          <div
            class="number"
            v-html="formatter(list[0].num) + '<font>张</font>'"
          ></div>
        </div>
        <div class="survey-box">
          <span>剩余卡券成本</span>
          <div
            class="number"
            v-html="formatter(list[1].num) + '<font>元</font>'"
          ></div>
        </div>
        <div class="survey-box">
          <span>已售总金额</span>
          <div
            class="number"
            v-html="formatter(list[2].num) + '<font>元</font>'"
          ></div>
        </div>
        <div class="survey-box">
          <span>总核销卡券</span>
          <div
            class="number"
            v-html="formatter(list[3].num) + '<font>张</font>'"
          ></div>
        </div>
        <div class="survey-box">
          <span>剩余卡券可抵扣金额</span>
          <div
            class="number"
            v-html="formatter(list[4].num) + '<font>元</font>'"
          ></div>
        </div>
        <div class="survey-box">
          <span>已发放卡券抵扣金额</span>
          <div
            class="number"
            v-html="formatter(list[5].num) + '<font>元</font>'"
          ></div>
        </div>
        <div class="survey-box" style="width: calc(50% - 9px)">
          <span>卡券发放用户数</span>
          <div
            class="number"
            v-html="formatter(list[6].num) + '<font>人</font>'"
          ></div>
        </div>
        <div class="survey-box" style="width: calc(50% - 9px)">
          <span>所有卡券的总成本</span>
          <div
            class="number"
            v-html="formatter(list[7].num) + '<font>元</font>'"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { formatterNumber } from "@/common/js/util.js";
export default {
  props: {
    dataArr: Array,
  },
  data() {
    return {
      list: [
        { num: 0 },
        { num: 0 },
        { num: 0 },
        { num: 0 },
        { num: 0 },
        { num: 0 },
        { num: 0 },
        { num: 0 }
      ],
    };
  },
  methods: {
    animation(data, index) {
      data = parseInt(data);
      let value = Math.ceil(parseInt(data) / 120); // 计算单次需要增加的数值
      let timer = setInterval(() => {
        if (this.list[index].num + value < data) {
          this.list[index].num = this.list[index].num + value;
        } else {
          this.list[index].num = data;
          clearInterval(timer);
        }
      }, 2);
    },
    formatter(num) {
      return formatterNumber(num, 10000, 2, true, true);
    },
  },
  watch: {
    dataArr(val) {
      this.list = [
        { num: 0 },
        { num: 0 },
        { num: 0 },
        { num: 0 },
        { num: 0 },
        { num: 0 },
        { num: 0 },
        { num: 0 },
      ];
      val.forEach((item, index) => {
        this.animation(item, index);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@font-face {
  font-family: "DIN Condensed Bold";
  //src: url('~@/assets/font/DIN Condensed Bold.eot');
  src: // url('~@/assets/font/DIN Condensed Bold.eot?#iefix') format('embedded-opentype'),
             // url('~@/assets/font/DIN Condensed Bold.woff') format('woff'), 
             // url('~@/assets/font/DIN Condensed Bold.ttf') format('truetype'),
    url("~@/assets/font/DIN-Condensed.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.chart-content {
  padding: 1% 10px 1% 20px;
  .survey {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
  }

  //   .survey::-webkit-scrollbar {
  //     /*滚动条整体样式*/
  //     width: 2px; /*高宽分别对应横竖滚动条的尺寸*/
  //     height: 1px;
  //   }
  //   .survey::-webkit-scrollbar-thumb {
  //     /*滚动条里面小方块*/
  //     border-radius: 1px;
  //     box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  //     background: #409eff;
  //   }
  //   .survey::-webkit-scrollbar-track {
  //     /*滚动条里面轨道*/
  //     box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  //     border-radius: 1px;
  //     background: #ededed;
  //   }

  .survey-box {
    width: calc(33.3333333% - 9px);
    border: 1px solid #f2f2f2;
    padding: 0.5% 2.8% 1%;
    background: linear-gradient(to top, #f9f9f9, #fff);
    height: calc(50% - 14px);
    color: #409eff;
    overflow: hidden;
    display: flex;
    align-items: space-around;
    justify-content: center;
    flex-direction: column;
    margin-top: 14px;
    span,
    .number {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 100%;
      display: block;
    }
    span {
      color: #888;
      font-size: 12px;
    }
    /deep/.number {
      color: #409eff;
      margin-top: 8%;
      font-size: 3.3vh;
      line-height: 1;
      font-family: "DIN Condensed Bold";
      font-weight: 400;
      font {
        // font-size: 32px;
        font-size: 12px;
        font-weight: 0;
        font-family: "微软雅黑";
        &:first-child {
          margin-left: 4px;
        }
      }
    }
  }
}
</style>